<template>
  <div id="page-frame">
    <view-box>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
      <!--菜单部分-->
      <tabbar style="position: fixed;">
        <tabbar-item link="/">
          <img slot="icon" src="./assets/image/menu-1.png">
          <span slot="label">首页</span>
        </tabbar-item>
        <tabbar-item link="/prize">
          <img slot="icon" src="./assets/image/menu-2.png">
          <span slot="label">奖品</span>
        </tabbar-item>
        <tabbar-item link="/guide">
          <img slot="icon" src="./assets/image/menu-3.png">
          <span slot="label">攻略</span>
        </tabbar-item>
        <tabbar-item link="/home">
          <img slot="icon" src="./assets/image/menu-4.png">
          <span slot="label">我的</span>
        </tabbar-item>
      </tabbar>
    </view-box>
  </div>
</template>

<script>
  import { ViewBox, Tabbar, TabbarItem } from 'vux'
  export default {
    name: 'app',
    components: {
      ViewBox,
      Tabbar,
      TabbarItem
    }
  }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';
  @import '~vux/src/styles/close.less';
  html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background-color: #fdf2e4;
  }
  // 框架页面
  #page-frame {
    height: 100%;
    max-width: 750px;
    margin: 0 auto;
  }
</style>
